package myJs.components

import cats.effect.SyncIO
import japgolly.scalajs.react._
import japgolly.scalajs.react.component.Scala.BackendScope
import japgolly.scalajs.react.extra.{ReusabilityOverlay, StateSnapshot}
import japgolly.scalajs.react.vdom.all._
import japgolly.scalajs.react.vdom.all.onClick.Event
import myJs.Implicits._
import myJs.Utils._
import myJs.myPkg.jquery._
import myJs.tool.Tool
import myJs.tool.Tool._
import myJs.user.soft.keggEnrich.KeggEnrich

import scala.collection.SeqMap

/** Created by yz on 3/11/2020
  */
object ToggleComponent {

  case class Props(
      state: StateSnapshot[Boolean],
      label: String = "",
      name: String,
      fieldName: String = "",
      questionInfo: String = "",
      show: Boolean = true
  ) {
    @inline def render: VdomElement = Component(this)
  }

  class Backend(bs: BackendScope[Props, Unit]) {

    def render(p: Props) = {

      def toggleValid(toggleShow: Boolean, fieldName: String) = SyncIO {
        val bv = $("#form").bv
        val node = ReactDOM.findDOMNode(bs.raw).get.node
        val parentJq = $(node).parents(".myArg")
        if (fieldName.nonBlank) {
          val curJq = parentJq.findInputByName(fieldName)
          if (toggleShow) {
            bv.revalidateField(curJq)
          } else {
            bv.updateStatus(curJq, "VALID")
          }
        }
      }

      def defaultChange(checked: Boolean)(e: ReactEventFromInput) = {
        toggleValid(checked, p.fieldName) >>
          p.state.modState(x => checked)
      }

      val s = p.state.value
      div(
        `class` := "form-group col-sm-12",
        (display := "none").unless(p.show),
        label(
          width := "100%",
          s"${p.label}",
          span(
            `class` := "",
            a(
              `type` := "button",
              `class` := "selfQuestion",
              title := messages("note"),
              VdomAttr("data-container") := "body",
              VdomAttr("data-toggle") := "popover",
              VdomAttr("data-html") := "true",
              VdomAttr("data-placement") := "left",
              VdomAttr("data-content") := p.questionInfo,
              VdomAttr("data-trigger") := "click",
              i(`class` := "fa fa-question-circle-o")
            )
          ).when(p.questionInfo.nonBlank),
          ":"
        ),
        div(
          `class` := s"toggle btn ${if (s) "btn-primary" else "btn-light off"}",
          dataToggle := "toggle",
          role := "button",
          width := "53px",
          height := "34px",
          input(
            `class` := "myToggle",
            `type` := "checkbox",
            (checked := true).when(s),
            dataToggle := "toggle",
            dataOn := messages("yes"),
            dataOff := messages("no"),
            name := s"${p.name}",
            vDataId := "iPathContent",
            `class` := "",
            width := "100px",
            height := "32px",
            value := "true",
            onChange --> SyncIO.unit
          ),
          div(
            `class` := "toggle-group",
            label(
              `for` := "",
              `class` := "btn btn-primary toggle-on",
              messages("yes"),
              onClick ==> defaultChange(false)
            ),
            label(`for` := "", `class` := "btn btn-light toggle-off", messages("no"), onClick ==> defaultChange(true)),
            span(`class` := "toggle-handle btn btn-light")
          )
        )
      )
    }
  }

  val Component = ScalaComponent.builder[Props].renderBackend[Backend].build

}
